<template>
    <!-- <div class="science-list"> -->
        <div class="filter-container" style="margin: 1rem 0;">
            <!-- 年份筛选 -->
            <div class="filter-group" v-for="filter,index in filters" :key="filter.dictTypeId">
                <h3 class="filter-title">
                    <img v-if="index == 0" src="/icon/science/year.png" :alt="filter.name" />
                    <img v-if="index == 1" src="/icon/science/type.png" :alt="filter.name" />
                    <img v-if="index == 2" src="/icon/science/download.png" :alt="filter.name" />
                    {{filter.name}}：
                </h3>
                <div class="filter-options">
                    <button v-for="item in filter.dictList" :key="item.id" class="filter-btn"
                        :class="{ active: filter.currentFilter === item.id }" @click="filterHandle(filter,item.id,item.value)">
                        {{ item.name }}
                    </button>
                </div>
            </div>
        </div>
    <!-- </div> -->
</template>

<script setup>
const emit = defineEmits(['filter-change']);
const props = defineProps({
    filters: {
        type: Array,
        required: true
    }
})

const filterHandle = (filter, id, value) => {
    filter.currentFilter = id;
    filter.currentValue = value;
    const selectedFilter = [];
    props.filters.forEach(item => {
        const obj = {};
        if(item.currentFilter != '0'){
            obj.name = item.code;
            obj.value = item.currentValue;
            selectedFilter.push(obj)
        }
    })
    emit('filter-change', selectedFilter)
}



</script>

<style lang="scss">
.science-list {
    padding: 1rem 0;

}

.filter-container {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .filter-group {
        margin-bottom: 1.5rem;
        display: flex;
        gap: 16px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .filter-title {
        margin: 0;
        min-width: 60px;
        font-size: 1rem;
        color: #666;
        margin-top: .3rem;
        img {
            width: 1.2rem;
            height: 1.2rem;
            vertical-align: -4px;
            margin-right: 5px;
        }
    }

    .filter-options {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .filter-btn {
        padding: 3px 1rem;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 16px;
        font-size: 1rem;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            border-color: #1867CA;
            color: #1867CA;
        }

        &.active {
            background: #1867CA;
            border-color: #1867CA;
            color: white;
        }
    }
}

@media (max-width: 768px) {
    .filter-group {
        flex-direction: column;

        .filter-title {
            line-height: 1.5;
        }
    }

    .filter-options.columns-2 {
        grid-template-columns: 1fr;
    }
}
</style>